﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>  使用 jquery.tinycarousel 实现的例子.  </title>

    <script src="../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.tinycarousel.js" type="text/javascript"></script>



<script type="text/javascript">

    $(document).ready(function () {
        $('#slider-code').tinycarousel({ pager: true, interval: true});
    });

</script>



<style type="text/css">

#slider-code { height: 395px; overflow:hidden; }
#slider-code .viewport { float: left; width: 504px; height: 375px; overflow: hidden; position: relative; }
#slider-code .buttons { display: block; margin: 30px 10px 0 0; float: left; }
#slider-code .next { margin: 30px 0 0 10px;  }
#slider-code .disable { visibility: hidden; }
#slider-code .overview { list-style: none; padding: 0; margin: 0;  position: absolute; left: 0; top: 0; }
#slider-code .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 375px; border: 1px solid #dcdcdc; width: 500px;}
#slider-code .overview li img { max-width : 500px; max-height : 375px; }

#slider-code .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 45px; }
#slider-code .pager li { float: left; }
#slider-code .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 5px; color: #555555; font-size: 14px; font-weight: bold; display: block; }
#slider-code .active { color: #fff; background-color:  #555555; }
                    
</style>


</head>
<body>



Options

<table>

  <tr>
    <td> start: 1 </td>  <td> -- where should the carousel start? </td>
  </tr>
  <tr>
    <td> display: 1 </td>  <td>-- how many blocks do you want to move at a time?</td>
  </tr>
  <tr>
    <td> axis: 'x' </td>  <td>-- vertical or horizontal scroller? 'x' or 'y' .</td>
  </tr>
  <tr>
    <td> controls: true </td>  <td>-- show left and right navigation buttons?</td>
  </tr>
  <tr>
    <td> pager: false </td>  <td>-- is there a page number navigation present?</td>
  </tr>
  <tr>
    <td> interval: false </td>  <td> -- move to the next block on interval.</td>
  </tr>
  <tr>
    <td> intervaltime: 3000 </td>  <td>-- interval time in milliseconds.</td>
  </tr>
  <tr>
    <td> animation: true </td>  <td>-- false is instant, true is animate.</td>
  </tr>
  <tr>
    <td> duration: 1000 </td>  <td>-- how fast must the animation move in milliseconds?</td>
  </tr>
  <tr>
    <td> callback: null </td>  <td>-- function that executes after every move
    </td>
  </tr>

</table>





<div id="slider-code">
    <a href="#" class="buttons prev">left</a>
    <div class="viewport">
        <ul class="overview">
            <li><img src="../images/1.jpg"  alt="" /></li>
            <li><img src="../images/2.jpg"  alt="" /></li>
            <li><img src="../images/3.jpg"  alt="" /></li>
            <li><img src="../images/4.jpg"  alt="" /></li>
            <li><img src="../images/5.jpg"  alt="" /></li>
        </ul>
    </div>
    <a href="#" class="buttons next">right</a>
    <ul class="pager">
        <li><a rel="0" class="pagenum" href="#">1</a></li>
        <li><a rel="1" class="pagenum" href="#">2</a></li>
        <li><a rel="2" class="pagenum" href="#">3</a></li>
        <li><a rel="3" class="pagenum" href="#">4</a></li>
        <li><a rel="4" class="pagenum" href="#">5</a></li>
    </ul>
</div>



</body>
</html>
